import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:my_meeting/extension/widget_ext.dart';
import 'package:my_meeting/widget/common_widget.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

import '../../generated/assets.dart';
import '../../generated/l10n.dart';
import '../../res/colors.dart';
import 'appointment_logic.dart';

class AppointmentPage extends GetView<AppointmentLogic> {
  const AppointmentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorStyle.color_fff7f8fa,
      appBar: CommonWidget.appBar(S.current.Appointment),
      body: Column(
        children: [
          /// 日期
          Container(
            height: 90.h,
            color: Colors.white,
            child: GridView.builder(
              itemCount: controller.dates.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 7, childAspectRatio: 0.8),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    /// 星期几
                    Text(
                      controller.dates[index]["weekday"]!,
                      style: TextStyle(
                          color: ColorStyle.color_FF999999, fontSize: 12.sp),
                    ).marginOnly(bottom: 8.h),

                    /// 日期
                    Obx(() => Container(
                          padding: const EdgeInsets.all(7),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: controller.dateIndex.value == index
                                  ? ColorStyle.color_ff1877ff
                                  : Colors.transparent,
                              shape: BoxShape.circle),
                          child: Text(
                            controller.dates[index]["date"]!,
                            style: TextStyle(
                                color: controller.dateIndex.value == index
                                    ? ColorStyle.white
                                    : ColorStyle.color333333,
                                fontSize: 10.sp),
                          ),
                        )),
                  ],
                ).gesture(onTap: () {
                  controller.dateIndex.value = index;
                  controller.checkBtnEnabled();
                });
              },
            ),
          ),

          Row(
            children: [
              /// 空余会议室
              Text(
                S.current.freeRoom,
                style: TextStyle(
                    color: ColorStyle.color333333,
                    fontWeight: FontWeight.w600,
                    fontSize: 14.sp),
              ).expanded(),

              /// 设施
              InkWell(
                onTap: () => controller.facilitie(),
                child: Text(
                  S.current.facilitie,
                  style: TextStyle(
                      color: ColorStyle.color_ff1877ff,
                      fontWeight: FontWeight.w500,
                      fontSize: 12.sp),
                ),
              ),
            ],
          ).marginOnly(top: 12.h, left: 16.w, right: 16.w),
          Container(
            width: Get.width,
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(8.r)),
            margin: EdgeInsets.only(top: 10.h, left: 16.w, right: 16.w),
            padding: const EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('C501',
                    style: TextStyle(
                        color: ColorStyle.color_FF999999, fontSize: 14.sp)),
                Row(
                  children: [
                    SvgPicture.asset(Assets.svgLoc, width: 25, height: 25),
                    Text('3${S.current.floor}',
                            style: TextStyle(
                                color: ColorStyle.color_FF999999,
                                fontSize: 13.sp))
                        .marginOnly(left: 4.w),
                    SvgPicture.asset(Assets.svgMember, width: 25, height: 25)
                        .marginOnly(left: 20.w),
                    Text('6${S.current.people}',
                            style: TextStyle(
                                color: ColorStyle.color_FF999999,
                                fontSize: 13.sp))
                        .marginOnly(left: 4.w)
                        .expanded(),
                    Text(S.current.devices,
                        style: TextStyle(
                            color: ColorStyle.color_FF999999, fontSize: 13.sp)),
                  ],
                ).marginOnly(top: 10.h),
                Obx(() => SfRangeSlider(
                      min: 9.0,
                      max: 18.0,
                      interval: 1,
                      showTicks: true,
                      showLabels: true,
                      enableTooltip: true,
                      minorTicksPerInterval: 1,
                      values: controller.sfRangeValues.value,
                      activeColor: Colors.blue,
                      inactiveColor: Colors.grey[300],
                      onChanged: (SfRangeValues newValues) {
                        controller.sfRangeValues.value = newValues;
                      },
                      onChangeEnd: (SfRangeValues newValues) {},
                    )).marginOnly(top: 10.h),
              ],
            ),
          ),

          const SizedBox().expanded(),
          Obx(() => CommonWidget.button(S.current.nextStep,
                  controller.isBtnEnabled.value, controller.nextStep))
              .marginOnly(left: 16.w, right: 16.w, bottom: 20.h),
        ],
      ),
    );
  }
}
